<script setup>
import { ref } from 'vue'

const navList = ref([
  {
    type: '材料',
    classify: {
      复核材料轻量化: '<p>暂无</p>'
    }
  },
  {
    type: '硬件组件',
    classify: {
      整机设计:
        '<p>希龙科技（深圳）有限公司、<i>中飞智能制造（深圳）有限公司</i>、深圳兴汇航空科技有限公司、深圳玉龙无人机技术有限公司、深圳市科控通航技术股份有限公司</p>',
      传感器: '<p>暂无</p>',
      电池与动力系统: '<p>暂无</p>'
    }
  },
  {
    type: '软件技术',
    classify: {
      飞控系统: '<p>深圳运飞智能有限公司</p>',
      通信与导航设施: '<p>暂无</p>'
    }
  }
])
const emits = defineEmits(['changSon3Height'])
const navbar = ref(navList.value[1].type)
const contentJson = ref(navList.value[1].classify)
const choseBar = (item) => {
  navbar.value = item.type
  contentJson.value = item.classify
  if (navbar.value == '材料') {
    emits('changSon3Height', 350)
  } else if (navbar.value == '硬件组件') {
    emits('changSon3Height', 190)
  } else {
    emits('changSon3Height', 270)
  }
}
</script>

<template>
  <div class="card">
    <CommonTitle title="上游企业总览" />
    <div class="navbox">
      <p
        v-for="(item, index) in navList"
        :key="index"
        @click="choseBar(item)"
        :class="{ active: navbar == item.type }"
      >
        {{ item.type }}
      </p>
    </div>
    <div class="content">
      <div class="left">
        <p v-for="(v, k) in contentJson" :key="k">{{ k }}</p>
      </div>
      <div class="right">
        <p v-for="(v, k) in contentJson" :key="k" v-html="v"></p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  margin-top: 15px;

  .navbox {
    display: flex;
    margin: 5px 20px;

    p {
      flex: 1;
      height: 32px;
      text-align: center;
      line-height: 32px;
      color: #85b9cb;
      cursor: pointer;
      background: url('@img/industry/nochose.png');
      background-size: 100% 100%;

      &.active {
        color: #fff;
        background: url('@img/industry/chosed.png');
        background-size: 100% 100%;
      }
    }
  }

  .content {
    display: flex;
    margin: 12px 20px;

    .left {
      width: 130px;
      background: url('@img/industry/overview_left.png') no-repeat;
      background-size: 100% 100%;
      color: #fff;

      p {
        height: 76px;
        padding: 12px;
        line-height: 16px;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #afebff;
      }
    }

    .right {
      flex: 1;
      margin-left: 6px;
      p {
        height: 76px;
        padding: 12px 15px;
        display: flex;
        line-height: 16px;
        align-items: center;
        background: rgba(0, 213, 255, 0.1);

        :deep {
          i {
            color: #ffe100;
            font-style: normal;
          }
        }

        &:nth-child(even) {
          background: rgba(28, 115, 132, 0.1);
        }
      }
    }
  }
}
</style>
